<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>4.人员案例_computed</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">
      <input type="text" v-model="keyword">
      <ul>
        <li v-for="p in persons2">{{p.name}}--{{p.age}}--{{p.gender}}</li>
      </ul>
    </div>

    <script type="text/javascript">
      new Vue({
        el:'#demo',
        data:{
          keyword:'', //收集用户输入的关键词
          persons:[   //完整的数据
            {id:'asdbuadfyu01',name:'马冬梅',age:18,gender:'女'},
            {id:'asdbuadfyu02',name:'周冬雨',age:19,gender:'女'},
            {id:'asdbuadfyu03',name:'周杰伦',age:20,gender:'男'},
            {id:'asdbuadfyu04',name:'温兆伦',age:21,gender:'男'},
          ]
        },
        computed:{
          // ①初次读取persons2时。②所依赖的数据发生变化时
          persons2(){
            return this.persons.filter( p => p.name.includes(this.keyword) )
          }
        }
      })
    </script>
  </body>
</html>